<template>
  <div class="sync-container">
    <div class="sync_list">
      <a-button
        type="primary"
        preIcon="ant-design:cloud-download-outlined"
        @click="openInit"
        >同步</a-button
      >
    </div>
    <div class="sync_dialog">
      <a-modal
        v-model:visible="dlg.status"
        :title="dlg.title"
        :confirmLoading="confirmLoading"
        @ok="syncData"
        @cancel="closereset"
        width="50%"
        destroyOnClose
      >
        <div class="sync_table">
          <slot name="addTo"></slot>
          <a-table
            class="sync_table_list"
            rowKey="id"
            :row-selection="rowSelection"
            :dataSource="syncList"
            :columns="tableColumns"
            :pagination="false"
          />
        </div>
      </a-modal>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive, unref } from "vue";
import { message } from "ant-design-vue";
import { propsType, hisResult, listOptions } from "./sync.type";
import type { TableProps } from "ant-design-vue";
export default defineComponent({
  name: "rw-sync",
  props: {
    type: {
      type: String,
      default: "",
    },
    addTo: {
      type: String,
      default: "",
    },
    list: {
      type: Function,
      default: () => {},
    },
    tableColumns: {
      type: Array,
      default: () => [],
    },
  },
  emits: ["ok"],
  setup(props: propsType, { emit }) {
    let { type, list, tableColumns, addTo } = props;
    const confirmLoading = ref(false);
    const syncList = ref([]);
    const nowSelectKeyList = ref([]);

    const dlg = ref({
      title: "同步数据",
      status: false,
    });
    function openInit() {
      dlg.value.status = true;
      if (!addTo) initComponent();
    }
    function setlist(fn: () => Promise<string>, options: listOptions) {
      list = fn;
      options.immediate && initComponent();
    }
    // 点击按钮后进行初始化
    async function initComponent() {
      let removeMessage = message.loading("同步数据中...");
      try {
        reset();
        let res: hisResult;
        res = await list();
        syncList.value = res.data.data;
        removeMessage();
        dlg.value.status = true;
      } catch {
        syncList.value = [];
        removeMessage();
      }
    }
    //重置状态
    function reset() {
      nowSelectKeyList.value = [];
      confirmLoading.value = false;
    }

    //定义表格多选方法
    const rowSelection = reactive<TableProps["rowSelection"]>({
      onChange: (selectedRowKeys) => {
        nowSelectKeyList.value = selectedRowKeys;
      },
    });

    // 点击同步按钮
    async function syncData() {
      confirmLoading.value = true;
      emit("ok", unref(nowSelectKeyList), () => {
        reset();
        dlg.value.status = false;
      });
    }
    function closereset() {
      syncList.value = [];
    }
    return {
      dlg,
      tableColumns,
      syncList,
      rowSelection,
      confirmLoading,
      initComponent,
      openInit,
      syncData,
      setlist,
      closereset,
    };
  },
});
</script>

<style lang="scss" scoped>
.sync_table {
  padding: 20px;
}
</style>

<style lang="scss">
.midd_title {
  margin: 0;
  padding: 0;
  font-weight: 600;
  font-size: 16px;
}
.sync_table_list {
  .ant-table-content {
    max-height: 500px;
    overflow: auto;
  }
}
</style>
